<!DOCTYPE html>
<html dir="ltr">

<head>
  <meta charset="UTF-8">
  <title>Radio Group - Search</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
  <script src="../../../../../scripts/testing/scripts.js"></script>
  <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>

<body>
  <ion-app>
    <ion-header>
      <ion-toolbar>
        <ion-title>Radio Group - Form</ion-title>
      </ion-toolbar>
      <ion-toolbar>
        <ion-searchbar placeholder="Type to filter..." debounce="0"></ion-searchbar>
      </ion-toolbar>
      <ion-toolbar>
        <ion-note id="value">Current value:</ion-note>
      </ion-toolbar>
    </ion-header>

    <ion-content class="outer-content">
      <ion-radio-group allow-empty-selection></ion-radio-group>
    </ion-content>

    <style>
      ion-note {
        padding: 0 10px;
      }
    </style>
    <script>
      const radioGroup = document.querySelector('ion-radio-group');
      const searchbar = document.querySelector('ion-searchbar');
      const currentValue = document.querySelector('#value');
      
      radioGroup.addEventListener('ionChange', (ev) => {
        currentValue.innerText = `Current value: ${ev.detail.value}`;
      });
      
      searchbar.addEventListener('ionChange', (ev) => {
        filter(ev.detail.value);
      });
      
      const filter = (value) => {
        const query = (value != null) ? value.toLowerCase() : '';
        const data = [
          { id: 0, value: 'zero' },
          { id: 1, value: 'one' },
          { id: 2, value: 'two' },
          { id: 3, value: 'three' }
        ];
        
        let html = '';
        
        data.forEach(d => {
          if (d.value.includes(query)) {
            html += `
              <ion-item>
                <ion-label>Item ${d.value}</ion-label>
                <ion-radio value="${d.value}"></ion-radio>
              </ion-item>
            `;
          }
        });        
        
        radioGroup.innerHTML = html;
      }
      
      filter();
    </script>

  </ion-app>
</body>

</html>
